<template>
	<view>

		<uni-card :is-shadow="false" is-full>
			<text>点击公告区域可查看公告信息详情！</text>
		</uni-card>

		<view class="card-container" v-for="(d) in list" @click="showDetail(d.bid)">
			<uni-card class="post-content" :title="d.title"
				:isFull="true" :sub-title=" '发布人：'+d.username" :extra="tools.formatDate(d.lastupdate)">
			</uni-card>
		</view>

		<uni-load-more @clickLoadMore="loadmore" :content-text="loadContext" :status="status"></uni-load-more>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		api,
		tools
	} from '../../api/api.js'
	import {
		onReady,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	onReady(() => {
		uni.startPullDownRefresh({})
	})

	onPullDownRefresh(() => {
		page.value.pageNumber = 1
		query()
	})

	const status = ref('more')

	const loadmore = () => {
		page.value.pageNumber++
		if (page.value.pageNumber >= page.value.pageCount) {
			status.value = 'noMore'
			return
		}
		status.value = 'loading'
		api.get(
			'/crud/billboard',
			tools.concatJson(queryInfo.value, page.value),
			(data) => {
				status.value = 'more'
				if (data.success) {
					list.value = list.value.concat(data.data.data)
					page.value = data.data.pageBean

					if (page.value.pageNumber >= page.value.pageCount) {
						status.value = 'noMore'
						return
					}
					return
				}
				uni.showToast({
					title: data.message,
					icon: 'fail'
				})

			}
		)
	}

	const loadContext = ref({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载……",
		contentnomore: "到底啦宝贝~"
	})

	const queryInfo = ref({
		title: '',
		content: '',
		username: ''
	})

	const page = ref({
		pageNumber: 1,
		pageSize: 10
	})

	const list = ref([])

	const showDetail = (bid) => {
		uni.navigateTo({
			url: '/pages/notice/detail?bid=' + bid
		})
	}


	const query = () => {
		api.get(
			'/crud/billboard',
			tools.concatJson(queryInfo.value, page.value),
			(data) => {
				uni.stopPullDownRefresh()
				if (data.success) {
					list.value = data.data.data
					page.value = data.data.pageBean
					return
				}
				uni.showToast({
					title: data.message,
					icon: 'fail'
				})

			}
		)
	}
</script>

<style scoped>
	.post-content {
		border-radius: 10px;
	}

	.card-container {
		margin: 20px;
		margin-bottom: 20px;
	}
</style>